/*----------本项目要依赖jquery-3.5.1.js的支持----------- */

//当前页码
let currentPage = 1;
//总页数
let totalPage = 20;

/**
 * 动态生成分页器的函数
 * @date 2021-03-22
 * @param {any} pageNum
 * @returns {any}
 */
function appendList(pageNum) {
  $(".desc span:eq(0)").html(totalPage);
  //先删除所有的page-item
  let pageItem = $(".page-item");
  if (pageItem) {
    pageItem.remove();
  }
  //确定当前页码的范围
  let start = pageNum <= 6 ? 1 : pageNum - 5;
  let end = start + 9;
  //如果超过总条数时，等于总条数
  if (end >= totalPage) {
    end = totalPage;
  }
  //使用循环拼接元素
  for (let i = start; i <= end; i++) {
    let a = $(`<a class="page-item">${i}</a>`);
    //给点击的元素添加
    if (pageNum === i) {
      a = $(`<a class="page-item active">${i}</a>`);
    }
    //把a元素动态拼接到页码中
    a.insertBefore($(".next-page"));
    //给a元素绑定事件
    a.click(function () {
      let index = parseInt(a.html());
      appendList(index);
      currentPage = index;
      $(".pager").val(currentPage);
      $(".desc span:eq(1)").html(currentPage);
    });
  }
}

//工厂函数
$(function () {
  //页面首次加载第1页
  appendList(1);
  //点击下一页的操作
  $(".next-page").click(function () {
    currentPage++;
    if (currentPage >= totalPage) {
      currentPage = totalPage;
    }
    appendList(currentPage);
    $(".pager").val(currentPage);
    $(".desc span:eq(1)").html(currentPage);
  });
  //点击上一页的操作
  $(".prev-page").click(function () {
    currentPage--;
    if (currentPage <= 0) {
      currentPage = 1;
    }
    appendList(currentPage);
    $(".pager").val(currentPage);
    $(".desc span:eq(1)").html(currentPage);
  });
  //pager输入框失去焦点或回车时可以实现分页器的变化
  $(".pager")
    .blur(function () {
      let currentPage = +$(this).val();
      appendList(currentPage);
      $(".pager").val(currentPage);
      $(".desc span:eq(1)").html(currentPage);
    })
    .keydown(function (e) {
      if (e.which === 13) {
        let currentPage = +$(this).val();
        appendList(currentPage);
        $(".pager").val(currentPage);
        $(".desc span:eq(1)").html(currentPage);
      }
    });
});
